<template>
    <div class="xtx-city" ref="target">
        <div class="select" @click="toggle" :class="{active:visible}">
            <span v-if="!fullLocation" class="placeholder">请选择配送地址</span>
            <span v-else class="value">{{fullLocation}}</span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="option" v-if="visible" v-loading="loading">
            <span class="ellipsis" @click="changeItem(item)" v-for="item in currList"
                  :key="item.code">{{item.name}}</span>
        </div>
    </div>
</template>

<script>
    import {onClickOutside} from "@vueuse/core";
    import Axios from "axios";

    export default {
        name: "XtxCity",
        props: {
            fullLocation: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                defulat: '请选择配送地址'
            },
        },
        data() {
            return {
                visible: false,//显示隐藏数据
                loading: false,
                allCityData: [],//所有省市区数据
                //定义选择的 省市区 数据
                changeResult: {
                    provinceCode: '',
                    provinceName: '',
                    cityCode: '',
                    cityName: '',
                    countyCode: '',
                    countyName: '',
                    fullLocation: ''
                }

            }
        },
        mounted() {

            onClickOutside(this.$refs.target, () => {
                this.close()
            })
        },
        methods: {

            close() {
                this.visible = false
            },
            open() {
                this.loading = true
                this.visible = true
                // 清空之前选择
                for (const key in this.changeResult) {
                    this.changeResult[key] = ''
                }
                this.getCityData().then(data => {
                    this.allCityData = data
                    this.loading = false
                })

            },
            toggle() {
                this.active ? this.close() : this.open()
            },
            getCityData() {
                return new Promise((resolve, reject) => {
                    if (window.cityData) {
                        console.log('获取缓存数据')
                        resolve(window.cityData)
                    } else {
                        const url = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
                        Axios.get(url).then(res => {
                            window.cityData = res.data
                            resolve(res.data)
                        })

                    }
                })
            },

            // 当你点击按钮的时候记录
            changeItem(item) {
                if (item.level === 0) {
                    // 省
                    this.changeResult.provinceCode = item.code
                    this.changeResult.provinceName = item.name
                } else if (item.level === 1) {
                    // 市
                    this.changeResult.cityCode = item.code
                    this.changeResult.cityName = item.name
                } else if (item.level === 2) {
                    // 地区
                    this.changeResult.countyCode = item.code
                    this.changeResult.countyName = item.name
                    // 完整路径
                    this.changeResult.fullLocation = `${this.changeResult.provinceName} ${this.changeResult.cityName} ${this.changeResult.countyName}`
                    // 这是最后一级，选完了，关闭对话框，通知父组件数据
                    this.close()
                    this.$emit('change', this.changeResult)
                }
            }

        },
        computed: {
            currList() {
                // 默认省一级
                let list = this.allCityData
                // 可能：市一级
                if (this.changeResult.provinceCode) {
                    list = list.find(p => p.code === this.changeResult.provinceCode).areaList
                }
                // 可能：县地区一级
                if (this.changeResult.cityCode) {
                    list = list.find(c => c.code === this.changeResult.cityCode).areaList
                }
                return list
            }
        }
    }
</script>

<style scoped lang="less">
    .xtx-city {
        display: inline-block;
        position: relative;
        z-index: 400;

        .select {
            border: 1px solid #e4e4e4;
            height: 30px;
            line-height: 28px;
            padding: 0 5px;
            cursor: pointer;

            &.active {
                background: #fff;
            }

            .placeholder {
                color: #999;
            }

            .value {
                color: #666;
                font-size: 12px;
            }

            i {
                font-size: 12px;
                margin-left: 5px;
            }
        }

        .option {
            width: 542px;
            border: 1px solid #e4e4e4;
            position: absolute;
            left: 0;
            top: 29px;
            background: #fff;
            min-height: 200px;
            line-height: 30px;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;

            > span {
                width: 130px;
                text-align: center;
                height: 29px;
                cursor: pointer;
                border-radius: 4px;
                padding: 0 3px;

                &:hover {
                    background: #f5f5f5;
                }

            }
        }

    }
</style>